<template>
  <div class="the-header-container">
    <div class="the-header">
      <!--图标-->
      <div class="header-logo">
        <el-image style="width: 35px; height: 35px" :src="logoUrl" />

        <span>{{siteName}}</span>
      </div>
      <ul class="navbar">
        <li
          v-for="item in navMenuList"
          :key="item.id"
          @click="userRouterCheck(item.path)"
        >{{item.name}}</li>
      </ul>
      <div class="header-search">
        <el-icon>
          <Search />
        </el-icon>
      </div>

      <div class="header-right">
        <el-divider direction="vertical" />

        <span v-if="!store.state.loginState" @click="router.push('/Login')">登录</span>

        <div v-else class="user-info">
          <el-avatar :size="40" :src="store.state.userInfo.profile.avatarUrl" />

          <el-dropdown @command="handleUserOption">
            <span>{{store.state.userInfo.profile.nickname}}</span>
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="my-home">我的主页</el-dropdown-item>
                <el-dropdown-item command="my-music">我的音乐</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent } from "vue";
import { navMenuList, logoUrl } from "../assets/data/header";
import { siteName } from "../assets/data/global";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import userRouterCheck from "../hooks/useRouterCheck";
export default defineComponent({
  setup() {
    const router = useRouter();
    const store = useStore();

    const handleUserOption = (command: string | number | object) => {
      console.log("command", command);

      switch (command) {
        case "my-home":
          router.push("/user/home");
          break;
        case "my-music":
          router.push("/user/music");
          break;
      }
    };
    return {
      siteName,
      navMenuList,
      logoUrl,
      router,
      store,
      handleUserOption,
      userRouterCheck,
    };
  },
});
</script>
 
<style lang = "scss" scoped>
@import "../assets/css/page-header.scss";
</style>